<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>车还还</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" type="text/css" href="/Public/css/main.css"/>
		<link rel="stylesheet" type="text/css" href="/Public/weixin/css/bind.css"/>
		<script type="text/javascript" src="/Public/js/jquery/jquery-1.11.3.min.js" ></script>
		<style>
			.tl-tit{background:#ff5700;color: #fff;text-align:center;padding:0.5rem 0;}
			.tl-list{border:1px solid #ff5700;margin:0.5rem 1.0rem;}
			.tl-list ul li{margin: 0 0.5rem;padding:0.5rem 0;border-bottom: 1px dashed grey;overflow:hidden;}
			.tl-list ul li .left{float:left;width:25%;}
			.tl-list ul li .right-input{float:left;border:none;width:70%;}
			.tl-list ul li .mid-input{float:left;border:none;width:45%;}
			.tl-list ul li .right-img{float:right;height:25px;}
			.tl-list ul li .right-button{float:right;background:#ff5700;color:#fff;border-radius:5px;padding: 5px 10px;}
			.tl-list ul .remark {padding: 10px 0;text-align: center;color:#ff5700;}
			.tl-sub{margin:0.5rem 1.0rem;}
			.tl-sub #sub{background:#ff5700;padding:0.5rem 0;text-align:center;color:#fff;}
		</style>
	</head>
	
	<body >
		<section class="tl-tit">账号绑定</section>
		<!--修改手机-->
		<section class="tl-list">
			<ul>
				<li>
		 			<span class="left">您的姓名:</span>
		 			<input type="text" id="name" name="name" class="right-input" placeholder="请输入姓名"/>
				</li>
				<li > 			
		 			<span class="left">证件号码:</span>
		 			<input type="text" class="right-input" id="card" name='card' value="" placeholder="请输入证件号码" />
				</li>
				<li > 			
		 			<span class="left">e&nbsp;账号:</span>
		 			<input type="text" class="right-input" id="eaccount" name='eaccount' placeholder="请输入e账号" />
				</li>
				<li > 			
		 			<span class="left">手机号码:</span>
		 			<input type="text" class="right-input" name='phone' id="phone" placeholder="请输入手机号码" />
				</li>
				<li > 			
		 			<span class="left">图形验证码:</span>
		 			<input type="text" class="mid-input" id='verify_code' placeholder="请输入图形验证码" />
		 			<img src="/Weixin/User/verify" class='right-img' onclick='fresh(this);'>
				</li>
				<li>
		 			<span class="left">手机验证码</span>
		 			<input type="text" value="" class="mid-input" id="phone_code" placeholder="请输入验证码" />
		 			<div class="right-button" onclick="wait(this)">获取验证码</div>
				</li>
				<div id='remark' class='remark'></div>
			</ul>
		</section>
		<!--/end修改手机-->
	
	<section class="tl-sub">
		<div id='sub'  onclick='sub();'>立即绑定</div>
	</section>
	</body>
  <script>
  	//提交
  	function sub(){
  		var name = $('#name').val();
  		var card = $('#card').val();
  		var eaccount = $('#eaccount').val();
  		var phone = $('#phone').val();
  		var phone_code = $('#phone_code').val();
  		$.post('/Weixin/User/bind',
  		{
  			name:name,
  			card:card,
  			eaccount:eaccount,
  			phone:phone,
  			phone_code:phone_code,	
  		},function(data){
  			var list = new Array();
		  	list = eval('(' + data +')');
		  	if(list['returnCode'] == 0){
		  		window.location.href = list['returnUrl'];
		  	}else{
		  		$('#remark').html(list['returnInfo']);
		  	}	
  		});
  	}

  	//刷新
  	function fresh(dom){
  		var src ='/Weixin/User/verify';
  		$(dom).attr('src',src +'?'+ Math.random());
  	}

  	function wait(dom){
	  	//请输入验证码
		if(!$("#verify_code").val()){
			alert("请输入图片验证码");
			return;
		}
		var disabled_value = $(dom).attr('disabled');
		if(disabled_value == 'disabled'){
			return;
		}

		var wait=60;　
		var  time= function(dom){
	        if (wait == 60) {
				$.post(
				  "/Weixin/Sms/send",
				  {
				  	phone:$('#phone').val(),
				    verify_code:$("#verify_code").val()
				  },
				  function(data){
				  	var list = new Array();
				  	list = eval('(' + data +')');
				  	if(list['returnCode'] == 0){
				  		$('.right-img').click();
				  		$('#remark').html('短信验证码已发送到手机中，请注意查看！');
				  		$(dom).attr("disabled", true);
			           	wait--;
			            $(dom).html(""+wait+"s");
			            setTimeout(function() {
			                time(dom)
			            },
			            1000);
					}else{
						if(list['returnCode'] == 1){
							$('#phone').focus();	
						}else if(list['returnCode'] == 2){
							$('.right-img').click();
							$('#verify_code').focus();
						}
						$('#remark').html(list['returnInfo']);
					}
					
				   });
	        
			}else if(wait == 0){ 
	            $(dom).removeAttr("disabled");
	            $(dom).html("获取验证码");
	            $('#remark').html('');
	        }else{
	             $(dom).attr("disabled", true);
	           	 wait--;
	             $(dom).html(""+wait+"s");
	            setTimeout(function() {
	                time(dom)
	            },
	            1000);  
	        }
		};
		time(dom);	
	}	

 

  </script>
  </html>
